

async function getData() {
    const res = await axios({
        url: '/dashboard'
    })
    console.log(res.data.data);
    const { groupData, overview, provinceData, salaryData, year } = res.data.data
    salaryEchart(year)
    salaryPieEchart(salaryData)
    groupSalaryEchart(groupData)
    boyGirlEchart(salaryData)

}
//薪资折线图
function salaryEchart(year) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#line'))
    // 指定图表的配置项和数据
    const option = {
        // 标题部分的设置
        title: {
            text: '2021全学科薪资走势',
            top: '2%',
            left: '3%'
        },
        // 图表
        grid: {
            // 设置上下左右的间隙
            top: '20%',
            left: '10%',
            right: '10%',
            bottom: '10%'
        },
        // x轴的设置
        xAxis: {
            type: 'category',
            data: year.map(v => v.month), // 箭头行数 一行代码 省略 {} return
            // x轴线段设置
            axisLine: {
                // 线段的样式
                lineStyle: {
                    // 类型 虚线
                    type: 'dashed',
                    // 颜色
                    color: '#d3d3d3'
                }
            },
            // x轴文本设置
            axisLabel: {
                // 颜色
                color: 'orange'
            }
        },
        // y轴的设置
        yAxis: {
            type: 'value',
            // 分割线
            splitLine: {
                // 线的样式
                lineStyle: {
                    type: 'dashed', // 类型
                    // width:20, // 宽度
                    color: 'deepskyblue' // 颜色
                }
            }
        },
        color: ['#5f8eff'],
        // 提示框 设置了才会出现
        tooltip: {
            show: true
        },
        series: [
            {
                data: year.map(v => v.salary),
                type: 'line',
                // 圆圈
                smooth: true,
                // 圆圈大小
                symbolSize: 10,
                // 线宽
                lineStyle: {
                    width: 8
                },
                // 区域颜色
                areaStyle: {
                    // 渐变
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#aed4ff' // 0% 处的颜色
                            },
                            {
                                offset: 0.7,
                                color: '#f0f0f0' // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            }
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}
// 薪资饼图
function salaryPieEchart(salaryData) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#salary'))
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '班级薪资分布',
            top: '2%',
            left: '3%'
        },
        tooltip: {
            trigger: 'item'
        },
        // 图例
        legend: {
            bottom: '5%',
            left: 'center'
        },
        // 颜色
        color: ['#fda224', '#5097ff', '#3fceff', '#34d39a', 'yellowgreen'],
        series: [
            {
                name: 'Salary',
                type: 'pie',
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryData.map(v => {
                    return {
                        value: v.g_count + v.b_count,
                        name: v.label
                    }
                })
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}
// 薪资柱状图
function groupSalaryEchart(groupData) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#lines'))

    // 指定图表的配置项和数据
    const option = {
        // x轴设置
        xAxis: {
            type: 'category',
            data: groupData[1].map(v => v.name),
            // 线段设置
            axisLine: {
                // 线的样式
                lineStyle: {
                    type: 'dashed',
                    color: '#d4d4d6'
                }
            }
        },
        yAxis: {
            type: 'value',
            // 分割线设置
            splitLine: {
                // 线的样式
                lineStyle: {
                    type: 'dashed',
                    color: '#d4d4d6'
                }
            }
        },
        // 颜色
        color: [
            // 渐变
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#34d29a' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#44ffea' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#499fed' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#d8eafb' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            }
        ],
        series: [
            // 柱状图 给多个图形,会有柱形
            {
                data: groupData[1].map(v => v.hope_salary),
                type: 'bar'
            },
            {
                data: groupData[1].map(v => v.salary),
                type: 'bar'
            }
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)

    // ---------- 点击按钮高亮 ----------
    const btns = document.querySelectorAll('#btns button')
    btns.forEach(v => {
        v.onclick = function () {
            // console.log('clickme')
            // 移除所有的高亮类名
            btns.forEach(item => item.classList.remove('btn-blue'))
            // 为自己添加高亮类名
            this.classList.add('btn-blue')
            // 更新数据 innerHTML可能会因为格式化多一些内容
            const index = this.innerHTML.trim()
            // console.log('index:', index)
            // 更新图表
            // x轴的数据
            option.xAxis.data = groupData[index].map(v => v.name)
            // 2个柱形图的数据
            option.series[0].data = groupData[index].map(v => v.hope_salary)
            option.series[1].data = groupData[index].map(v => v.salary)

            myChart.setOption(option)
        }
    })
}
//   男女薪资分布饼图
function boyGirlEchart(salaryData) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#gender'))

    // 指定图表的配置项和数据
    const option = {
        // title可以设置一个数组 给多个标题
        title: [
            {
                text: '男女薪资分布',
                top: '3%',
                left: '4%',
            },
            {
                text: '男生',
                left: 'center',
                top: '45%',
            },
            {
                text: '女生',
                left: 'center',
                top: '85%',
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
        series: [
            {
                name: '男生薪资',
                type: 'pie',
                radius: ['25%', '35%'],
                // 圆心的位置
                center: ['50%', '30%'],
                data: salaryData.map(v => {
                    return {
                        value: v.b_count,
                        name: v.label
                    }
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: 'orange'
                    }
                }
            },
            {
                name: '女生薪资',
                type: 'pie',
                radius: ['25%', '35%'],
                center: ['50%', '70%'],
                data: salaryData.map(v => {
                    return {
                        value: v.g_count,
                        name: v.label
                    }
                }),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: 'orange'
                    }
                }
            }
        ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
}
getData()